<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="popup-" style="color: white">{{ $t("PenggunaSaya") }}</div>
      </div>
    </div>
    <div class="list"></div>
    <div class="content">
      <div class="search-bar">
        <div style="width: 70%">
          <div class="fb-item">
            <div class="fb-inputbox">
              <input
                type="text"
                v-model="search"
                maxlength="28"
                @keydown.enter="handleSearch()"
                placeholder=""
              />
              <div style="display: flex; align-items: center" width="30%">
                <!-- <div class="iconbox">
                  <i class="van-icon van-icon-search" style="font-size: 18px"></i>
                </div> -->
                <span
                  class="text-sm mr-1"
                  @click="handleSearch"
                  style="margin-right: 12px"
                  >{{ $t("Cari") }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div style="width: 25%">
          <div class="fb-item" @click.stop="handleSelect">
            <div class="fb-inputbox flex justify-between">
              <div class="text-sm">{{ $t("Tanggal") }}</div>
              <span class="van-dropdown-menu__title mr-20px">
                <div class="van-ellipsis"></div>
                <div class="van-ellipsis"></div>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-list">
        <van-list
          v-model="listLoading"
          @load="onLoadList"
          :finished="
            this.inviteList.length == this.pages.total && this.pages.total > 0
          "
          finished-text="No More"
          loading-text="loading"
        >
          <div class="nodata" v-show="inviteList.length == 0">
            <img src="@/assets/img/default.jpg" />
            <p>{{ $t("Tidak Ada Data") }}</p>
          </div>
          <div class="content-box" v-for="v in inviteList" :key="v.id">
            <div class="content-box-text">
              <div>{{ $t("Akun") }}</div>
              <div>{{ v.uid }}</div>
            </div>
            <div class="content-box-text">
              <div>{{ $t("Jumlah") }}</div>
              <div>{{ v.rebate }}</div>
            </div>
            <div class="content-box-text">
              <div>{{ $t("Waktu") }}</div>
              <div>{{ getTimes(v.createtime) }}</div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="my-container"></div>
    <van-popup
      v-model="show"
      :style="{ top: '30vh' }"
      :get-container="getContainer"
    >
      <div class="modal">
        <div class="mb-2 text-center text-xl text-[#ffefd9]">
          {{ $t("Tanggal") }}
        </div>
        <van-field
          readonly
          clickable
          :value="startValue"
          :placeholder="$t('TanggalMulai')"
          @click="startPicker = true"
          class="rounded-md !bg-[#ffefd9] mb-2"
        />
        <van-field
          readonly
          clickable
          :value="endValue"
          :placeholder="$t('TanggalSelesai')"
          @click="endPicker = true"
          class="rounded-md !bg-[#ffefd9]"
        />
        <div class="flex justify-between mt-4">
          <van-button
            color="#ffefd9"
            class="text-center text-xl text-[#ffefd9] !rounded-md w-28"
            @click="reset"
          >
            {{ $t("SetelUlang") }}
          </van-button>
          <van-button
            color="#ffefd9"
            class="text-center text-xl text-[#ffefd9] !rounded-md w-28"
            @click="submit"
          >
            {{ $t("OK") }}
          </van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="startPicker" round class="w-full" position="bottom">
      <van-datetime-picker
        v-model="startcurrentDate"
        type="date"
        title=""
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="startPicker = false"
        @confirm="startConfirm"
      />
    </van-popup>
    <van-popup v-model="endPicker" round class="w-full" position="bottom">
      <van-datetime-picker
        v-model="endcurrentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="endPicker = false"
        @confirm="endConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { httpAgentInviteList } from "@/http/api";
import { getTimes } from "@/utils/common";
import dayjs from "dayjs";

export default {
  name: "ucenter",
  data() {
    return {
      // 我的邀请列表
      inviteList: [],
      search: "",
      Tanggal: "",
      listLoading: false,
      listAjax: false,
      show: false,
      account_name: localStorage.getItem("account_name") || "", //账户名
      background: localStorage.getItem("bgck"),
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        nodata: false,
      },
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 12, 31),
      startcurrentDate: new Date(),
      endcurrentDate: new Date(),
      startValue: "",
      endValue: "",
      startPicker: false,
      endPicker: false,
    };
  },
  methods: {
    getTimes,
    reset() {
      this.startValue = "";
      this.endValue = "";
    },
    submit() {
      this.show = false;
      this.inviteList = [];
      this.pages.page = 1;

      let time = {
        start: this.startValue ? dayjs(this.startValue).unix() : "",
        end: this.endValue ? dayjs(this.endValue).unix() : "",
      };
      this.getInviteList(time);
    },
    startConfirm(value) {
      this.startValue = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      this.startPicker = false;
      // this.startValue = dayjs(value).format("YYYY-MM-DD");
      // this.startPicker = false;
    },
    endConfirm(value) {
      const time = new Date(new Date(value).setHours(23, 59, 59));
      // console.log(Date(value).setHours(23,59,59))
      this.endValue = dayjs(time).format("YYYY-MM-DD HH:mm:ss");
      this.endPicker = false;
    },
    async getInviteList(time) {
      let times = time ? time : { start: "", end: "" };

      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
      };
      this.listAjax = true;
      let res = await httpAgentInviteList({
        account_name: this.search,
        ...params,
        ...times,
      });
      this.listAjax = false;
      this.listLoading = false;
      if (res.code == 0) {
        this.inviteList = [...this.inviteList, ...res.data.list];
        this.pages.total = res.data.page.total_count;

        if (this.inviteList.length < this.pages.total) this.pages.page++;
        // if (!this.pages.total) this.pages.nodata = true;
        if (!this.pages.total) this.pages.nodata = true;
      }
    },
    onLoadList() {
      this.listLoading = true;
      if (this.pages.nodata) return (this.listLoading = false);
      if (this.inviteList.length == this.pages.total && this.pages.total > 0)
        return (this.listLoading = false);
      this.getInviteList();
    },
    handleAgen() {
      this.$router.push("/agent");
    },
    handleDetail() {
      console.log("handleDetail");
    },
    handleSearch() {
      this.inviteList = [];
      this.pages.page = 1;
      let time = {
        start: this.startValue ? dayjs(this.startValue).unix() : "",
        end: this.endValue ? dayjs(this.endValue).unix() : "",
      };

      // console.log(time)
      this.getInviteList(time);

      console.log("handleSearch");
    },
    handleSelect() {
      console.log("handleSelect");
      this.show = true;
    },
    getContainer() {
      return document.querySelector(".my-container");
    },
  },
};
</script>
<style lang="less" scoped>
// * {
//   font-weight: 400;
//   color: white;
// }
@import url("./ucenter-common.less");
.van-popup {
  border-radius: 20px;
  background-color: transparent;
}
.modal {
  width: 80vw;
  border-radius: 20px;
  min-height: 100px;
  padding: 30px;
  background: #c86c5f;
  &-title {
    color: #fff;
    font-size: 40px;
    text-align: center;
    padding-top: 30px;
  }
}
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.mr-20px {
  margin-right: 20px;
}
.pb-20px {
  padding-bottom: 20px;
}
.search-bar {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  margin-bottom: 20px;
}
.content-box {
  margin-bottom: 20px;
}
.fb-item {
  width: 100%;

  .fb-inputbox {
    color: #c86c5f;
    display: flex;
    width: 100%;
    height: 60px;
    background: #fff3e2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    transition: all 0.25s;

    .iconbox {
      color: #c86c5f;
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      flex-shrink: 0;

      img {
        width: 48px;
        height: 48px;
      }
    }

    input {
      flex: 1;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-size: 30px;
      // padding-left: 20px;

      &::-webkit-input-placeholder {
        color: #c86c5f;
      }
    }

    &.active {
      border: 2px solid #dcbc9b;
      background: #c86c5f;
    }

    &.error {
      border: 2px solid rgba(235, 63, 63, 1);
      background: #c86c5f;
    }
  }

  ::v-deep .van-dropdown-menu {
    width: 100%;

    .van-dropdown-menu__bar {
      background: transparent;
      box-shadow: none;

      .van-dropdown-menu__item {
        justify-content: flex-start;
      }

      .van-dropdown-menu__title {
        color: #c86c5f;
        font-size: 30px;
        padding: 0;
        width: 100%;
        display: block;

        &::after {
          right: 24px;
        }
      }
    }

    .van-dropdown-item__option--active {
      color: #c86c5f;

      .van-dropdown-item__icon {
        color: #c86c5f;
      }
    }
  }
}
.fb-items {
  width: 100%;

  .fb-inputbox {
    color: #c86c5f;
    display: flex;
    width: 100%;
    height: 80px;
    background: #fff3e2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    transition: all 0.25s;

    .iconbox {
      color: #c86c5f;
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      flex-shrink: 0;

      img {
        width: 48px;
        height: 48px;
      }
    }

    input {
      flex: 1;
      height: 100%;
      width: 70%;
      background: transparent;
      border: none;
      outline: none;
      font-size: 30px;
      padding-right: 40px;

      &::-webkit-input-placeholder {
        color: #c86c5f;
      }
    }

    &.active {
      border: 2px solid #dcbc9b;
      background: #c86c5f;
    }

    &.error {
      border: 2px solid rgba(235, 63, 63, 1);
      background: #c86c5f;
    }
  }

  ::v-deep .van-dropdown-menu {
    width: 100%;

    .van-dropdown-menu__bar {
      background: transparent;
      box-shadow: none;

      .van-dropdown-menu__item {
        justify-content: flex-start;
      }

      .van-dropdown-menu__title {
        color: #c86c5f;
        font-size: 30px;
        padding: 0;
        width: 100%;
        display: block;

        &::after {
          right: 24px;
        }
      }
    }

    .van-dropdown-item__option--active {
      color: #c86c5f;

      .van-dropdown-item__icon {
        color: #c86c5f;
      }
    }
  }
}
.uc-header .back {
  height: initial;
}
.header-card {
  padding-bottom: 20px;
}
.list {
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #fff;
}
.content {
  margin: 20px 0;
  &-box {
    margin: 0 20px 20px;
    padding: 20px;
    background: rgb(255, 243, 226);
    border-radius: 20px;
    &-text {
      line-height: 1.6;
      color: rgb(200, 108, 95);
      display: flex;
      justify-content: space-between;
      > div {
        color: rgb(200, 108, 95);
      }
    }
  }
  &-text {
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
    line-height: 1.6;
    color: #fff;
  }
}
.mb-20px {
  margin-bottom: 20px;
}
.ulang {
  bottom: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  position: absolute;
  > div {
    width: 80vw;
    height: 80px;
    background: rgb(148, 195, 98);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
  }
}
</style>
